<template>
  <!--由于一开始不怎么会采用了绝对定位方式，这里样式最好还是不要动了-->
  <div>
    <!-- 背景 -->
    <div class="backg"><img :src="picsrc[0].url" id="p1"></div>
    <!-- 背景上显示的 -->
    <div class="frontg">
      <div>
        <!-- 图书馆三个大字 -->
        <img :src="picsrc[1].url" style="width:234px;height:148px" id="p2">
      </div>
      <div>
        <!-- 蓝色搜索按钮 -->
        <el-button type="primary" icon="el-icon-search" @click="search" style="background-color:rgb(161, 161, 235)"></el-button>
        <!-- 输入框 -->
        <el-input placeholder="请输入图书关键字" v-model="inputBookname" class="inputlibS" @keyup.enter.native="search"></el-input>

        <el-button type="primary" @click="searchAll" style="background-color:rgb(161, 161, 235)">搜索所有图书</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name:'TopwelcomPicture',
data(){
    return{
    picsrc:[{url:require("../../assets/libP.jpg")},//图片信息
            {url:require("../../assets/liblogo.png")}],
    inputBookname:'',//与输入框输入内容绑定
    BookMemory:'',//记忆搜索记录
    }
},
methods: {
  search(){//搜索方法，传参到textreadingbox处理
    if(this.inputBookname!=''){
      this.BookMemory = this.inputBookname
      this.$bus.$emit('booksearch',this.BookMemory)
      this.inputBookname = ''
    }
  },
  searchAll(){
    this.inputBookname = "all"
    if(this.inputBookname!=''){
      this.BookMemory = this.inputBookname
      this.$bus.$emit('booksearch',this.BookMemory)
      this.inputBookname = ''
    }
  }
},
}
</script>

<style lang="css" scoped>

.backg{
  position: absolute;
  left:0px;
  width: 100%;
  height: 269px;
  z-index: 0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);

}
.frontg{
  position: absolute;
  z-index: 2;
  left:25%;
  width: 50%;
  height: 269px;
  text-align: center;
}
#p1{
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.inputlibS{
  width: 50%;
}
</style>

